<template>
	<view>
		<view class="header-box">
			<image :src="imgUrl + '/image/my/my-top-bak.png'" class="bgImg" />
			<view class="header-title">我的</view>
			<!-- <wybar leftText="我的"></wybar> -->
			<view class="header">
				<view class="userinfo" @click="toLogin">
					<view class="face">
						<image :src="imgUrl + '/image/icon-head.png'"></image>
					</view>
					<view class="info">
						<view class="username">山西博才人力资源有限公司</view>
						<view class="integral">企业号：yiyi112233</view>

						<!-- <view v-else class="integral">未绑定公司</view> -->
					</view>
					<!-- <view class="info" v-else>
            <view class="username">未登录/注册</view>
            <view class="integral">点击可登录/注册</view>
          </view> -->
				</view>
				<view class="setting" @click="toSetting">
					<text class="yzb yzb-next icon-next"></text>
				</view>
			</view>
			<view class="header-items">
				<view class="header-item" v-for="(item,index) in topList" :key="index" @click="tabChange(item)">
					<image :src="item.img" mode="widthFix" />
					<view class="word">
						<text class="num">{{item.name}}</text>
						<text>{{item.des}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="list" v-for="(list, list_i) in severList" :key="list_i">
			<view class="li" v-for="(li, li_i) in list" @tap="toPage(li)"
				v-bind:class="{ noborder: li_i == list.length - 1 }" hover-class="hover" :key="li.name">
				<view class="left">
					<view class="icons">
						<image :src="li.icon"></image>
					</view>
					<view class="text">{{ li.name }}</view>
				</view>
				<text class="yzb yzb-next icon-next"></text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			const imageUrl = this.$mConfig && this.$mConfig.imageUrl ? this.$mConfig.imageUrl : '';
			return {
				imgUrl: imageUrl,
				bgImg: imageUrl + '/image/my/my-top-bak.png',
				backgroundImage: `url(${imageUrl + '/image/my/my-top-bak.png'})`,
				topList: [{
						name: '职位管理',
						des: '信息管理',
						url: '/pages/user/positionManagement/positionList',
						img: imageUrl + '/image/my/banner-kft.png'
					},
					{
						name: '认证管理',
						des: '企业认证信息',
						url: '/pages/user/renzheng/rzTypeList',
						img: imageUrl + '/image/my/banner-rht.png'
					}
				],
				authState: '待认证',
				severList: [
					[{
							name: '公司主页',
							show: true,
							icon: imageUrl + '/image/my/jianzhu.png',
							url: '/pages/user/company/baseInfor'
						},
						{
							name: '诚聘会员',
							show: true,
							icon: imageUrl + '/image/my/huiyuan.png',
							url: '/pages/user/members/recMember'
						},
						{
							name: '职位刷新',
							show: true,
							icon: imageUrl + '/image/my/shuaxin.png',
							url: '/pages/user/position/refreshPosition'
						},
						{
							name: '职位置顶',
							show: true,
							icon: imageUrl + '/image/my/zhiding.png',
							url: '/pages/user/position/topPosition'
						}
					],
					[{
							name: '我的收藏',
							show: true,
							icon: imageUrl + '/image/my/shoucang.png',
							url: '/pages/user/collection/collectCv'
						},
						{
							name: '浏览记录',
							show: true,
							icon: imageUrl + '/image/my/liulan.png',
							url: '/pages/user/browseRecord/myBrowseResume'
						},
						{
							name: '面试邀请',
							show: true,
							icon: imageUrl + '/image/my/mianshi.png',
							url: '/pages/user/interview/myInvite'
						},
						{
							name: '应聘记录',
							show: true,
							icon: imageUrl + '/image/my/yingpin.png',
							url: '/pages/user/apply/applyRecord'
						}
					],
					[{
							name: '收到简历',
							show: true,
							icon: imageUrl + '/image/my/jianli.png',
							url: '/pages/user/resume/resumeReceive'
						},
						{
							name: '下载记录',
							show: true,
							icon: imageUrl + '/image/my/xiazai.png',
							url: '/pages/user/resume/recordDownload'
						},
						{
							name: '修改密码',
							show: true,
							icon: imageUrl + '/image/my/mima.png',
							url: '/pages/user/changPassword/login-pwd'
						},
						{
							name: '系统设置',
							show: true,
							icon: imageUrl + '/image/my/xitong.png',
							url: '/pages/user/setting/setting'
						}
					]
				]
			};
		},
		created() {
			// 确保$mConfig有值
			if (this.$mConfig && this.$mConfig.imageUrl) {
				this.imgUrl = this.$mConfig.imageUrl;
			}
		},
		onShow() {
			if (this.hasLogin) {
				this.getUserInfo();
			}
		},
		methods: {

			// 获取用户信息
			async getUserInfo() {
				let userInfo = await this.$apis.getUserInfo();
				if (userInfo == true) {
					uni.clearStorageSync();
					this.$store.commit('SET_LOGOUT');
					if (this.goEasy.getConnectionStatus() === 'connected') {
						console.log('do  disconnect');
						getApp().globalData.imService.disconnect();
					}
					return;
				}
				this.$store.commit('SET_USERINFO', userInfo);
				if (userInfo.memberRole == 1) {
					if (userInfo.companyId == 0) {
						this.$mRouter.push({
							route: this.$mRoutesConfig.enter
						});
					} else {
						if (userInfo.companyAuth == 0) {
							this.authState = '待认证';
						} else if (userInfo.companyAuth == 1) {
							this.authState = '认证审核中';
						} else if (userInfo.companyAuth == 2) {
							this.authState = '认证失败';
						} else if (userInfo.companyAuth == 3) {
							this.authState = '已认证';
						}
					}
				} else if (userInfo.ifAddResume == false) {
					//暂无简历信息，强制添加
					this.$mRouter.push({
						route: this.$mRoutesConfig.userInfo
					});
				}
				this.updateTabbar();
			},

			updateTabbar() {
				if (this.userInfo.memberRole != 1) {
					uni.setTabBarItem({
						index: 1,
						text: '职位',
					});
				} else {
					uni.setTabBarItem({
						index: 1,
						text: '简历',
					});
				}
			},
			// 点击我的收藏
			tapGrid(type) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.collect,
					query: {
						id: 1
					}
				});
			},

			tapGrid2(item) {
				if (!this.userInfo.company) {
					uni.showToast({
						icon: 'none',
						title: '请先绑定公司'
					});
					return;
				}
				this.$mRouter.push({
					route: item.to,
					query: {
						id: 0
					}
				});
			},

			toLogin() {
				if (this.hasLogin) {
					this.$mRouter.push({
						route: this.$mRoutesConfig.userInfo,
						query: {
							id: 1
						}
					});
				} else {
					this.$mRouter.push({
						//#ifdef MP-WEIXIN
						route: this.$mRoutesConfig.login,
						//#endif
						//#ifdef H5
						route: this.$mRoutesConfig.loginPwd,
						//#endif
						//#ifdef APP-PLUS
						route: this.$mRoutesConfig.loginPwd,
						//#endif
						query: {
							id: 1
						}
					});
				}
			},

			async switchRole(role) {
				let res = await this.$apis.switchRole({
					role: role
				});
				this.getUserInfo();
				console.log('res======', res);
				if (res.result) {
					// 存在，直接切换
					console.log('存在，直接切换');
					uni.showToast({
						icon: 'none',
						title: '切换成功'
					});
				} else {
					//不存在，跳转编辑
					console.log('不存在，跳转编辑');
					if (role == 0) {
						//跳转到简历编辑页面。
						this.$mRouter.push({
							route: this.$mRoutesConfig.personReume,
							query: {
								id: 1
							}
						});
					} else {
						// this.$mRouter.push({
						// 	route: this.$mRoutesConfig.enter
						// });
					}
				}
			},
			tabChange(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			//用户点击列表项
			toPage(list_i, li_i) {
				console.log(list_i, li_i)
				let that = this;
				// if (this.severList[list_i][li_i].url == 'zhaopin') {
				// 	if(this.hasLogin){
				// 		uni.showModal({
				// 			title: '',
				// 			content: '确定切换到招聘？',
				// 			success: res => {
				// 				if (res.confirm) {
				// 					that.switchRole(1);
				// 				}
				// 			}
				// 		});
				// 	}else{
				// 		this.$mRouter.push({
				// 			route: this.$mRoutesConfig.login
				// 		});
				// 	}
				// 	return;
				// }
				// this.$mRouter.push({
				// 	route:list_i.url,
				// 	query: {
				// 		name:list_i.name
				// 	}
				// });
				uni.navigateTo({
					url: list_i.url
				})
			},

			toSetting() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.system,
					query: {
						id: 1
					}
				});
			},

			toResume() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.personReume,
					query: {
						id: 1
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	.header-box {
		// background:url('@/static/image/my/my-top-bak.png');
		height: 586rpx;
		background-size: 100% auto;
		position: relative;

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.header-title {
			text-align: center;
			font-size: 40rpx;
			color: #fff;
			font-weight: bolder;
			padding: 120rpx 0 50rpx;
			position: relative;
		}

		.header-items {
			display: flex;
			justify-content: space-between;
			position: relative;
			padding: 0 30rpx;
			margin-top: 60rpx;

			.header-item {
				// width: 50%;
				position: relative;

				image {
					width: 330rpx;
					height: 170rpx;
				}

				.word {
					position: absolute;
					top: 40rpx;
					left: 26rpx;
				}
			}

			text {
				display: block;
				color: #fff;
				font-size: 24rpx;
			}

			.num {
				font-weight: bolder;
				font-size: 34rpx;
			}
		}
	}

	.header {
		position: relative;

		&.status {
			padding-top: var(--status-bar-height);
		}

		width: 92%;
		padding: 0 40rpx;
		display: flex;
		align-items: center;

		.yzb-next {
			font-size: 42rpx;
			color: #222222;
			font-weight: bold;
		}

		.userinfo {
			width: 90%;
			display: flex;
			flex-direction: row;
			align-items: center;

			.face {
				image {
					width: 116upx;
					height: 116upx;
					border-radius: 75upx;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				padding-left: 30upx;
				margin-top: -15upx;

				.username {
					width: 100%;
					color: #222;
					font-size: 36rpx;
					font-weight: bold;
				}

				.integral {
					display: flex;
					align-items: center;
					color: #767676;
					font-size: 32upx;
					margin-top: 14rpx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 26rpx;
			height: 26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.hover {
		background-color: #eee;
	}

	.list {
		margin: 20rpx 30rpx 0;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;

		.li {
			height: 120rpx;
			// padding: 0 40rpx;
			border-bottom: solid 1upx #F5F5F5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&.noborder {
				border-bottom: 0;
			}

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.icons {
				display: flex;
				align-items: center;
				margin-right: 20upx;
				align-items: center;

				text {
					font-size: 40upx;
				}

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.text {
				width: 100%;
				color: #292F44;
				font-size: 32rpx;
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx;
			}

			.icon-next {
				font-size: 40rpx;
				color: #ccc;
				font-weight: bolder;
			}
		}
	}
</style>